﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <script src="../../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <!-- 

    1.让所有文字居中
    2.把作者毛泽东设灰色底白字(#999,#fff)
    3.将所有的div和p，统一显示10像素间距
    4.让id为mp的元素文字大小变成30px,红色加粗字体
    5.将前四行文字用1px的灰色边框(#ddd)括起来
    6.将紧跟着div的p标签文字加下划线
    7.把class为blue的div元素变蓝色字体
    -->
    <script>
        $(function(){
        	$('body').css('text-align','center');
        	$('h2').css('background-color','#999').css('color','#fff');
        	$('div').css('margin','10px');
        	$('p').css('margin','10px');
        	$('p[id="mp"]').css('font-size','30px').css('font-weight','bold').css('color','red');
        	$('div').eq(1).css('border','1px solid #ddd');
        	$('.content>p').css('text-decoration','underline')
        })
    </script>
</head>

<body>
    <!-- 综合案例 -->
    <h1>沁园春·雪</h1>
    <h2>毛泽东</h2>
    <div class="content">
        <div><span>北国风光，千里冰封，万里雪飘。</span>
            <div>望长城内外，惟余莽莽；大河上下，顿失滔滔。</div>
            <p>山舞银蛇，原驰蜡象，欲与天公试比高。</p>
            <p>须晴日，看红装素裹，分外妖娆。</p>
        </div>
        <p id="mp">江山如此多娇，引无数英雄竞折腰。</p>
    </div>
    <p class="blue">惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p>
    <div class="blue">一代天骄，成吉思汗，只识弯弓射大雕。</div>
    <p>俱往矣，数风流人物，还看今朝。</p>
</body>

</html>
